@import "public";
@import "main";

.loading{background: #968b83; position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; @extend .flex; @extend .itemsCenter; padding: .2rem;
  .container{width: 11.55rem; @extend .flex; @extend .itemsCenter; margin: 0 auto}
  .img{width: 4.68rem; height: 2.81rem; overflow: hidden; flex-shrink: 0; -webkit-flex-shrink: 0; position: relative; top: -.45rem;
    &:before{@include before(); top: 0; right: -1px; bottom: 0; z-index: 5; width: 2px; background: #968b83}
    &:after{@include before(); left: 0; top: 0; right: 0; bottom: 0; z-index: 4; background: url("../image/img468_3.png") center no-repeat; background-size: 100% 100%}
    div{width: 5.3rem; height: 2.8rem; overflow: hidden; position: relative; left: 0;
      animation: loading-animation 6s infinite linear alternate;
      -webkit-animation: loading-animation 6s infinite linear alternate;
    }
  }
  a.btn{flex-shrink: 0; -webkit-flex-shrink: 0; opacity: .4; font-size: .14rem; padding-right: 1rem; background: url("../image/img61.png") right center no-repeat; background-size: .61rem; line-height: .53rem; color: #fff;
    &:hover{opacity: 1}
  }
  .line{margin-left: .4rem; margin-right: .25rem; width: 100%; height: 1px; background: rgba(255, 255, 255, .4); position: relative;
    i{display: block; @include absolute($l:0, $t:0, $b:0); width: 0; background: #fff}
  }
}
@keyframes loading-animation {
  from {left: 0}
  to {left: -.62rem}
}
@-webkit-keyframes loading-animation{
  from {left: 0}
  to {left: -.62rem}
}

$headH:1.08rem;
.g-headD{height: $headH}
.g-head{position: fixed; z-index: 50; left: 0; top: 0; width: 100%;
  &.on{background: rgba(0, 0, 0, .2)}
  .wal{min-height: $headH; position: relative; max-width: 100%; margin: 0 .13rem}
  a.logo{display: block; background: rgba(142, 92, 34, .5) url("../image/logo.png") .34rem center no-repeat; background-size: 1.09rem; width: 1.81rem; height: .83rem; @include absolute($l:0, $t:.12rem, $z:11); @include radius(.18rem);
    &:hover{background-color: rgba(142, 92, 34, .4)}
  }
  .side{@include absolute($t:0, $r:.3rem, $b:0); @extend .flex; @extend .itemsCenter;
    ul.btn, dl.btn{@extend .flex}
    ul.btn{
      li{margin-left: .22rem; position: relative; height: .43rem}
      a{display: block; width: .43rem; height: .43rem; position: relative;
        img:nth-child(2){@include absolute($l:0, $t:0); opacity: 0}
        audio{display: none}
      }
      a:hover, a.on{
        img:nth-child(1){opacity: 0}
        img:nth-child(2){opacity: 1}
      }
      #audio.on{
        animation: rotate-animation 6s infinite linear;
        -webkit-animation: rotate-animation 6s infinite linear;
      }
      li.search{@extend .transition; width: .43rem;
        a{@include absolute($t:0, $r:0)}
        .form{@include absolute($l:0, $t:50%, $r:0); height: .36rem; margin-top: -.18rem; opacity: 0; @extend .transition; background: rgba(186, 124, 45, .5); @include radius(.5rem);
          .input input{width: 100%; height: .36rem; line-height: .36rem; font-size: .14rem; color: #fff; padding: 0 .15rem}
          .submit{@include absolute($t:0, $r:0, $b:0); width: .42rem; background: url("../image/search.png") center no-repeat; background-size: .24rem;
            input{width: 100%; height: .42rem; cursor: pointer}
          }
        }
        &:hover{width: 1.8rem;
          a{opacity: 0}
          .form{opacity: 1}
        }
      }
    }
    dl.btn{
      dd{margin-left: .28rem}
      a{font-size: .16rem; color: #fff; display: block; line-height: .4rem}
      a:hover, a.on{text-decoration: underline; color: #cbb175}
    }
  }
}
@keyframes rotate-animation {
  from {transform: rotate(0deg)}
  to {transform: rotate(360deg)}
}
@-webkit-keyframes rotate-animation{
  from {-webkit-transform: rotate(0deg)}
  to {-webkit-transform: rotate(360deg)}
}
.g-nav{@include absolute($t:.12rem, $l: 1.65rem, $r:6.4rem); min-height: .83rem; @include radius(.18rem); background: rgba(0, 0, 0, .5); padding: 0 1.5rem 0 .7rem; @extend .transition;
  &:hover{background: rgba(0, 0, 0, .4)}
  ul{@extend .flexWrap; @extend .flexBetween}
  a.name{display: block; height: .83rem; line-height: .83rem; color: #fff; font-size: .15rem; position: relative;
    &:before{@include before(); left: 50%; bottom: 0; width: 0; height: .03rem; background: $color}
    &:hover, &.on{color: $color;
      &:before{left: 0; width: 100%}
    }
  }
}
@media screen and (max-width: 1670px){
  .g-nav{right: 5rem; padding: 0 .5rem}
}

.g-foot{height: 1.12rem; font-size: .12rem; color: #666; @extend .flexWrap; @extend .itemsCenter; @extend .flexBetween; padding: 0 .3rem;
  a{color: #666; padding: 0 .1rem;
    &:hover{color: $color}
  }
  .col{@extend .flexWrap;
    p{padding-left: .12rem}
  }
}

.index-foot{font-size: .12rem; color: rgba(255, 255, 255, .3); @include absolute($r:.3rem, $b:.2rem); @extend .flexWrap; @extend .itemsCenter;
  a{color: rgba(255, 255, 255, .3); padding: 0 .1rem;
    &:hover{color: #fff}
  }
}

/*index*/
.indexFlash{width: 100%; overflow: hidden; position: relative; z-index: 1;
  li{height: 100vh; position: relative; overflow: hidden;
    &:before{@include before(); left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .4); z-index: 2}
    .img{@include absolute($l:0, $t:0, $r:0, $b:0, $z:1); background: center no-repeat; background-size: cover; @extend .transition; @include scale()}
    .img.ipadShow, .img.phoneShow{display: none}
    .video{@include absolute($l:0, $t:0, $r:0, $b:0, $z:1); overflow: hidden;
      video{min-width: 100%; min-height: 100%; position: absolute; left: 50%; top: 50%;
        transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
      }
    }
    .layer{@include absolute($l:3rem, $t:0, $r:0, $b:1rem); @extend .flexColumn; @extend .justifyCenter; color: #fff; letter-spacing: .02rem;
      .name{font-size: .57rem; position: relative; padding-bottom: .2rem; max-width: 7.45rem; border-bottom: #c2c0be solid 1px; line-height: 1em;
        &:before{@include before(); left: 0; bottom: -1px; width: 0; height: 1px; background: #ff8f00;
          transition-duration: 5.5s;
          -webkit-transition-duration: 5.5s;
          -moz-transition-duration: 5.5s;
          transition-timing-function: linear;
          -webkit-transition-timing-function: linear;
          -moz-transition-timing-function: linear;
        }
      }
      .msg{font-size: .2rem; padding: .15rem 0 .5rem 0;
        em{padding: 0 .18rem}
      }
      .more a{display: block; font-size: .14rem; color: #fff; border: #fff solid 1px; @include radius(.4rem); width: 1.37rem; height: .47rem; line-height: .45rem; text-align: center;
        &:hover{background: #fff; color: #3a5141}
      }
    }
  }
  li.swiper-slide-active{
    .img{@include scale(1);
      transition-duration: 5.5s;
      -webkit-transition-duration: 5.5s;
      -moz-transition-duration: 5.5s;
      transition-timing-function: linear;
      -webkit-transition-timing-function: linear;
      -moz-transition-timing-function: linear;
    }
    .layer .name:before{width: 100%}
  }
  .dots{@include absolute($r:.35rem, $t:0, $b:0, $z:12); width: .3rem; @extend .flexColumn; @extend .justifyCenter; align-items: flex-end; -webkit-align-items: flex-end;
    span{width: .21rem; height: .05rem; background: #dab866; @include radius(.05rem); margin: .035rem 0; @extend .transition}
    span.swiper-pagination-bullet-active{background: #fff; width: 100%}
  }
}

@media screen and (max-width: 1000px){
  .indexFlash li .img.ipadShow{display: block}
}
@media screen and (max-width: 700px){
  .indexFlash li .img.phoneShow{display: block}
}

.index-activity{width: 4.95rem; min-height: 3.93rem; @include absolute($l:0, $b:0); position: fixed; color: #fff; padding: 0 1.2rem 0 0;
  &:before{@include before(); right: 0; top: 0; width: 6.26rem; height: 6.26rem; @include radius(50%); background: #3a5141;
    animation: index-activity 6s infinite linear alternate;
    -webkit-animation: index-activity 6s infinite linear alternate;
  }
  &:after{@include before(); right: 0; top: 0; width: 6.26rem; height: 6.26rem; background: #fff; @include radius(50%); opacity: 0; @extend .transition}
  &:hover:after{opacity: .1}
  .title{height: 1.3rem; position: relative; z-index: 2; padding-left: .3rem;
    &:before{@include before(); left: -.2rem; top: -.77rem; width: 1.85rem; height: 1.85rem; @include radius(50%); background: rgba(188, 118, 29, .7);
      animation: index-activity-title 6s infinite linear alternate;
      -webkit-animation: index-activity-title 6s infinite linear alternate;
    }
    &:after{@include before(); left: -.2rem; top: -.77rem; width: 1.85rem; height: 1.85rem; background: #fff; @include radius(50%); opacity: 0; @extend .transition}
    &:hover:after{opacity: .1}
    h2{font-weight: 400; font-size: .2rem; position: relative}
  }
  .list{width: 100%; overflow: hidden; position: relative; z-index: 2;
    dd{font-size: .14rem; padding-left: .4rem; letter-spacing: .01rem; position: relative;
      &:before{@include before(); left: .4rem; bottom: 0; right: 0; height: .1rem; border-bottom: rgba(255, 255, 255, .05) dashed 1px}
      a{color: #fff; display: block; height: .6rem; line-height: .6rem; @extend .ellipsis; position: relative}
      a:hover{color: $color}
    }
    .arrow{width: 1.62rem; padding: .25rem 0 0 .6rem; @extend .flex; @extend .flexBetween;
      a{width: .16rem; height: .3rem; background: center no-repeat; background-size: 100%; opacity: .5;
        &:hover{opacity: 1}
        &.prev{background-image: url("../image/prev16.png")}
        &.next{background-image: url("../image/next16.png")}
      }
    }
  }
}
@keyframes index-activity {
  from {background: #3a5141}
  to {background: #487d58}
}
@-webkit-keyframes index-activity{
  from {background: #3a5141}
  to {background: #487d58}
}

@keyframes index-activity-title {
  from {background: rgba(188, 118, 29, .7)}
  to {background: rgba(20, 2, 150, .35)}
}
@-webkit-keyframes index-activity-title{
  from {background: rgba(188, 118, 29, .7)}
  to {background: rgba(20, 2, 150, .35)}
}

.index-brand{width: 2.83rem; height: 2.83rem; position: fixed; z-index: 11; left: 4.27rem; bottom: .27rem; text-align: center; color: #fff; background: rgba(20, 2, 150, .35); @include radius(50%);
  animation: index-brand 6s infinite linear alternate;
  -webkit-animation: index-brand 6s infinite linear alternate;
  &:after{@include before(); left: 0; top: 0; right: 0; bottom: 0; background: #fff; @include radius(50%); opacity: 0; @extend .transition}
  &:hover:after{opacity: .1}
  .title{font-size: .2rem; padding: .55rem 0 .45rem 0; position: relative; z-index: 2}
  .list{width: 100%; overflow: hidden; position: relative; z-index: 2;
    li{padding: .1rem 0;
      img{height: .4rem}
    }
    li:hover img{@include scale(1.1)}
  }
}
@keyframes index-brand {
  from {background: rgba(20, 2, 150, .35)}
  to {background: rgba(188, 118, 29, .7)}
}
@-webkit-keyframes index-brand{
  from {background: rgba(20, 2, 150, .35)}
  to {background: rgba(188, 118, 29, .7)}
}

.index-foot{font-size: .12rem; color: rgba(255, 255, 255, .3); @include absolute($r:.3rem, $b:.2rem); @extend .flexWrap; @extend .itemsCenter;
  a{color: rgba(255, 255, 255, .3); padding: 0 .1rem;
    &:hover{color: #fff}
  }
}

/*page*/
.p-banner{height: 4rem; overflow: hidden; position: relative;
  .bg{position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: center no-repeat; background-size: cover; @include scale(1.1)}
  .wal{position: relative; @extend .flex; @extend .itemsCenter; height: 4rem; padding-top: .96rem}
  .title{width: 2.08rem; height: 2.08rem; line-height: 2.08rem; position: relative; margin-right: .5rem; flex-shrink: 0; -webkit-flex-shrink: 0;
    i{display: block; @include radius(50%); @include absolute();
      &.i-1{left: 0; top: 0; background: #be8c4c; opacity: .83; width: 100%; height: 100%}
      &.i-2{right: -.04rem; top: -.12rem; background: #120954; opacity: .4; width: .83rem; height: .83rem}
      &.i-3{right: .14rem; bottom: -.08rem; background: #cc33cc; opacity: .53; width: .52rem; height: .52rem}
      &.i-4{left: -.37rem; bottom: 0; background: #159f41; opacity: .4; width: .42rem; height: .42rem}
      &.i-5{right: -.25rem; top: .47rem; background: #c98d40; opacity: .83; width: .22rem; height: .22rem}
      &.i-6{left: .16rem; top: 1.57rem; background: #fff; opacity: .53; width: .22rem; height: .22rem}
    }
    h2{font-weight: 400; text-align: center; color: #fff; font-size: .36rem; letter-spacing: .02rem; position: relative; z-index: 11}
  }
  .form{width: 5.86rem; height: .51rem; @include radius(.5rem); background: rgba(255, 255, 255, .8); position: relative; @extend .transition;
    &:hover{background: rgba(255, 255, 255, .9)}
    .input input{width: 100%; height: .51rem; line-height: .51rem; padding-left: .28rem; font-size: .16rem}
    .submit{@include absolute($t:0, $r:0, $b:0); width: .8rem; background: url("../image/img38.png") center no-repeat; background-size: .38rem; @extend .transition;
      &:hover{background-image: url("../image/img38on.png")}
      input{width: 100%; height: .51rem; cursor: pointer}
    }
  }
}

.shop-nav{min-height: .72rem; position: relative;
  .list{padding-left: .05rem;
    ul{@extend .flexWrap}
    li{padding-left: .45rem}
    a{display: block; height: .72rem; line-height: .72rem; position: relative; font-size: .18rem; color: #666;
      &:before{@include before(); left: 50%; top: .5rem; width: 0; height: .02rem; background: $color}
      &:hover, &.on{color: $color;
        &:before{left: 0; width: 100%}
      }
    }
  }
  a.btn{display: block; line-height: .72rem; @include absolute($t:0, $r:.55rem); font-size: .18rem; color: #666; padding-left: .58rem; background: url("../image/img42.png") left center no-repeat; background-size: .42rem;
    &:hover{color: $color; background-image: url("../image/img42on.png")}
  }
  a.back{display: block; line-height: .72rem; @include absolute($t:0, $l:.2rem); font-size: .18rem; color: #666; padding-left: .42rem; background: url("../image/img32.png") left center no-repeat; background-size: .32rem;
    &:hover{color: $color; background-image: url("../image/img32on.png")}
  }
}

.shop-list{background: #eeeff0; min-height: 3rem; padding: .5rem .55rem 0 .55rem;
  ul{@extend .flexWrap; margin-left: -.55rem}
  li{width: 20%; padding: 0 0 .47rem .55rem;
    a{@extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; text-align: center; height: 2.4rem; background: #fff; @include radius(.18rem); padding: .1rem; position: relative; letter-spacing: .01rem; font-size: .14rem; border: rgba(0, 0, 0, 0) solid .02rem; color: #666;
      .img{max-width: 2.6rem}
      .name{line-height: .25rem; padding-top: .12rem}
      .msg{text-decoration: underline; @include absolute($l:0, $b:0, $r:0); @extend .transition; opacity: 0; color: #d2a060}
    }
    a:hover{padding-bottom: .5rem; border-color: #dec19c; color: #d2a060;
      .msg{opacity: 1; bottom: .24rem}
    }
  }
  .p-more{padding: .25rem 0 .7rem 0}
}

.p-more a{display: block; margin: 0 auto; @include radius(.5rem); width: 1.81rem; height: .37rem; line-height: .35rem; text-align: center; border: #999 solid 1px; letter-spacing: .02rem; font-size: .14rem; color: #666;
  &:hover{color: #fff; background: $color; border-color: $color}
}

.shop-foot{width: 100%; overflow: hidden;; position: relative;
  &:before{@include before(); left: 0; top: 0; right: 0; bottom: 0; background: url("../image/shop-foot.jpg") center no-repeat; background-size: cover}
  &:hover:before{@include scale(1.1)}
  .wal{height: 5.6rem; @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; text-align: center; color: #fff; position: relative}
  .title{font-size: .48rem; letter-spacing: .02rem; padding-bottom: .55rem}
  .p-more a{border-color: #fff; color: #fff;
    &:hover{border-color: #dec19c}
  }
}

.shop-show{@extend .flexWrap; @extend .flexBetween; padding: 1.15rem .5rem; position: relative; max-width: 18.6rem; margin: 0 auto;
  .title{width: 2.9rem; height: 2.9rem; background: #fff; @include radius(50%); @include absolute($l:50%, $t:-2.12rem); margin-left: -1.45rem; @include shadow(0 .03rem .13rem rgba(0, 0, 0, .21));
    .img{width: 2.6rem; margin: 0 auto; padding: 1rem 0 0 0}
    p{@include absolute($l:0, $b:.38rem, $r:0); text-align: center; font-size: .13rem; color: #666; padding: .32rem .45rem 0 .45rem; background: url("../image/img21.png") center top no-repeat; background-size: .21rem}
  }
  .img-list{width: 50%; overflow: hidden; position: relative;
    li{overflow: hidden; position: relative; height: 6.08rem;
      div{@include absolute($l:0, $t:0, $r:0, $b:0); background: center no-repeat; background-size: cover; @extend .transition}
      &:hover div{@include scale(1.1)}
    }
    .num{@include absolute($r:.2rem, $b:.1rem); color: #fff; font-size: .2rem; background: url("../image/img24.png") center no-repeat; background-size: .24rem; width: .3rem; height: .44rem; line-height: 1em;
      .num-curr{@include absolute($l:0, $t:0)}
      .num-total{@include absolute($r:0, $b:0)}
    }
  }
  .container{width: 50%; background: #f6f3ec; min-height: 6.08rem; border-left: #fff solid 2px; font-size: .16rem; line-height: .36rem; color: #666; padding: 0 .9rem; @extend .transition;
    &:hover{background-color: #f9f6ef}
    .content{@extend .flexColumn; @extend .justifyCenter; min-height: 3.8rem; padding: .22rem 0}
    .list{height: .7rem; overflow: hidden; position: relative; background: url("../image/ico.png") left center no-repeat; background-size: .24rem;
      li{height: .7rem; line-height: .7rem; padding-left: .35rem; @extend .ellipsis;
        a{color: $color}
        a:hover{text-decoration: underline}
      }
    }
    .msg{padding: .22rem 0; border-top: #e3ddcf solid 1px}
  }
}

.shop-show2{
  .title{text-align: center; background: #978b83; padding: .5rem 0;
    h2{font-weight: 400; color: #fff; font-size: .48rem; line-height: 1em; padding-bottom: .2rem}
    div{font-size: .18rem; color: #bbaea6;
      a{color: #bbaea6; padding: 0 .12rem;
        &:hover{color: #fff}
      }
    }
  }
  .img{max-width: 1440px; margin: 0 auto; padding: .6rem .5rem 0 .5rem;
    .svg-box{position: relative;
      svg{@include absolute($l:0, $t:0, $r:0, $b:0)}
      svg .shop{
        path, polygon{opacity: 0; @extend .transition}
      }
    }
  }
  .p-more{padding-bottom: .4rem}
}

.p-layer{position: fixed; z-index: 100; left: 0; top: 0; right: 0; bottom: 0; opacity: 0; visibility: hidden; @extend .transition; @extend .flex; @extend .itemsCenter; @extend .justifyCenter;
  &.show{opacity: 1; visibility: visible}
  .p-layer-bg{position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, .65)}
  .container{position: relative; background: #fff; @include radius(.18rem)}
}

.shop-layer .container{width: 90%; padding: .45rem;
  .container-line{border: #e5e5e5 solid 1px; @extend .flexWrap; position: relative}
  .side-btn{@include absolute($l:.0, $t:.0, $b:.0); width: .7rem; border-right: #e5e5e5 solid 1px; background: #fff;
    a{height: 16vh; @extend .flex; @extend .itemsCenter; @extend .justifyCenter; text-align: center; font-size: .24rem; color: #666;
      &:hover, &.on{background: #978b83; color: #fff}
    }
  }
  .shop-box{width: 75%; height: 80vh; overflow: hidden; position: relative; z-index: 1; @extend .flex; @extend .itemsCenter; @extend .justifyCenter; padding: .2rem .2rem .2rem .9rem;
    #shop{width: 100%; flex-shrink: 0; -webkit-flex-shrink: 0;
      /*$time:0.5s;
      transition:width $time ease;
      -webkit-transition:width $time ease;
      -moz-transition:width $time ease;
      -o-transition:width $time ease;*/
    }
    .control{@include absolute($l:.9rem, $b:.2rem); @extend .flex;
      a{width: .28rem; height: .28rem; background: #fff center no-repeat; background-size: .28rem; border: #d2d2d2 solid 1px; position: relative; z-index: 1;
        &:hover{background-color: #eeeded; border-color: #eeeded; z-index: 2}
        &.small{background-image: url("../image/img28_1.png")}
        &.big{background-image: url("../image/img28_2.png"); left: -1px}
      }
    }
  }
  .side{width: 25%; height: 80vh; position: relative; border-left: #e5e5e5 solid 1px;
    .form{padding: .1rem; background: #dbd0c9; position: relative; min-height: .71rem;
      .input{background: #fff; @include radius(.5rem);
        input{width: 100%; height: .51rem; line-height: .51rem; padding-left: .28rem; font-size: .16rem}
      }
      .submit{@include absolute($t:.1rem, $r:.1rem, $b:.1rem); width: .8rem; background: url("../image/img38.png") center no-repeat; background-size: .38rem; @extend .transition;
        &:hover{background-image: url("../image/img38on.png")}
        input{width: 100%; height: .51rem; cursor: pointer}
      }
    }
    .list{@include absolute($l:0, $t:.71rem, $r:0, $b:0); padding-top: .3rem; overflow-y: auto;
      li{padding-top: .03rem;
        .name{height: .45rem; line-height: .45rem; padding: 0 .36rem; @extend .ellipsis; position: relative; font-size: .18rem; color: #666; background: #f0f0f0; cursor: pointer;
          &:before{@include before(); top: 0; right: .2rem; bottom: 0; width: .2rem; background: url("../image/img20.png") center no-repeat; background-size: 100%}
        }
        dl{padding: .1rem 0 .1rem .45rem; display: none;
          a{display: block; font-size: .14rem; color: #666; height: .36rem; line-height: .36rem; @extend .ellipsis; padding-left: .15rem;
            &:hover, &.on{background: #f1edea}
          }
        }
      }
      li.on{
        .name:before{background-image: url("../image/img20on.png")}
        dl{display: block}
      }
    }
  }
}


#shop{position: relative;
  .svg-box{position: relative;
    svg{@include absolute($l:0, $t:0, $r:0, $b:0)}
    svg .shop{
      path, polygon{opacity: 0; @extend .transition}
      &:hover, &.on{
        path, polygon{opacity: 1}
      }
    }
  }
  .tips-layer{position: absolute; z-index: 50; background: url("../image/img174.png") center no-repeat; background-size: 100%; width: 1.74rem; height: .94rem; margin-left: -.75rem; margin-top: -1rem; padding: .1rem .35rem .23rem .1rem; @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter; text-align: center; font-size: .14rem; line-height: .2rem; color: #999;
    p{padding: .02rem 0}
  }
}

.landscape-tips{position: fixed; z-index: 100000; left: 0; top: 0; bottom: 0; right: 0; background: rgba(0, 0, 0, .8); opacity: 0; visibility: hidden; @extend .flexColumn; @extend .itemsCenter; @extend .justifyCenter;
  .ico{width: 1.6rem}
  p{text-align: center; color: #fff; font-size: .24rem; line-height: 1.7em; padding-top: .2rem}
}

@media(orientation:landscape){
  .landscape-tips{opacity: 1; visibility: visible}
}